<template>
  <div class="ccgkFace">
    <div class="first">
      <div >
        <h5>{{ ccgkDataObj.ccgk_zzzs }}</h5>
        <span>注册总数</span>
      </div>
      <div class="bar1"></div>
      <div >
        <h5>{{ ccgkDataObj.ccgk_sxzs }}</h5>
        <span>上线总数</span>
      </div>
      <div style="width: 0">
        <div id="ccgk_chart_left1" >
        </div>
      </div>

    </div>
    <div class="second">
      <template v-for="(itemTit, index) in infoArr" >
        <div v-if="index !== 0" class="bar2"></div>
        <div >
          <h5>{{ ccgkDataObj[itemTit] }}</h5>
          <span>{{ ccgkKeyObj[itemTit] }}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
let option = {
  series: [
    {
      type: 'gauge',
      startAngle: 360,
      endAngle: 0,
      min: 0,
      max: 100,
      splitNumber: 10,
      radius: '80%',
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      itemStyle: {
        color: '#58D9F9'
      },
      progress: {
        show: true,
        roundCap: true,
        width: 10
      },
      pointer: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      title: {
        show: false
      },
      detail: {
        width: '60%',
        lineHeight: 20,
        height: 40,
        offsetCenter: [0, 0],
        valueAnimation: true,
        formatter: function (value) {
          return '{value|' + value.toFixed(0) + '%}\n{unit|上线率}';
        },
        rich: {
          value: {
            fontSize: 28,
            fontWeight: 'bolder',
            color: '#00FFE6'
          },
          unit: {
            fontSize: 15,
            align: 'center',
            color: '#fff',
            padding: [0, 0, -20, 10]
          }
        }
      },
      data: [
        {
          value: 50
        }
      ]
    },
    {
      type: 'gauge',
      startAngle: 360,
      endAngle: 0,
      min: 0,
      max: 100,
      splitNumber: 10,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      itemStyle: {
        color: '#58D9F9'
      },
      progress: {
        show: true,
        roundCap: true,
        width: 2
      },
      pointer: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      title: {
        show: false
      },
      detail: {
        show: false
      },
      radius: '90%',
      data: [
        {
          value: 100
        }
      ]
    }
  ]
};

export default {
  //车辆概况
  name: "ccgkFace",
  props:{
    infoArr: {
      type:Array,
      default:[]
    },
  },
  data(){
    return {
      ccgkDataObj:{
        ccgk_zzzs: 0,
        ccgk_sxzs: 0,
        ccgk_sxl: 0,
        ccgk_pjcc: 0,
        ccgk_lncc: 0,
        ccgk_lwcc: 0,
        ccgk_sfcc: 0,
        ccgk_mfcc: 0,
        ccgk_qxtcc: 0,
        ccgk_txjytcc: 0
      },
      ccgkKeyObj:{
        ccgk_pjcc: "配建停车场",
        ccgk_lncc: "临时停车场",
        ccgk_lwcc: "公共停车场",
        ccgk_sfcc: "收费车场",
        ccgk_mfcc: "免费车场",
        ccgk_qxtcc: "桥下停车场",
        ccgk_txjytcc: "退线经营车场"
      }

    }
  },
  mounted() {
    fetch(`./testData/ccgkdata.json`,{
      method: 'get',
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(response => response.json())
      .then(data => {
        console.log(data);
        this.ccgkDataObj = data;
        option.series[0].data[0].value = data.ccgk_sxl;
        this.initCcgkSxlChart()
      })
  },
  methods: {
    initCcgkSxlChart(){
      let myChart = echarts.init(document.getElementById('ccgk_chart_left1'));
      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  },
  beforeDestroy() {
  }
}
</script>

<style lang="scss" scoped>
.ccgkFace{
  padding: 0 15px;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  > div{
    width: 90%;
    height: 33%;
    background: #0092FF;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    > div{
      text-align: center;
      >H5{
        font-size: x-large;
        font-weight: 800;
        padding-bottom: 10%;
      }
      >span{
        color: #FFFFFF;
        font-size: initial;
        font-weight: 600;
      }
    }
    #ccgk_chart_left1{
      right: 3%;
      top: 5%;
      position: absolute;
      width: 120px;
      height: 120px;
    }
  }
  .first{
    color: #00FFE6;
    margin-bottom: 3%;
    background: linear-gradient(to right, #034044 , #041620 70%);
    .bar1{
      width: 1px;
      height: 66.6%;

      background-image: linear-gradient(#30666e 50%, transparent 0%); /* 35%设置虚线点y轴上的长度 */
      background-position: left; /* right配置右边框位置的虚线 */
      background-size: 10px 10px; /* 第一个参数设置虚线点x轴上的长度；第二个参数设置虚线点的间距 */
      background-repeat: repeat-y;
    }
  }
  .second{
    color: #0092FF;
    margin-bottom: 3%;
    background: #032A49;
    .bar2{
      width: 1px;
      height: 66.6%;
      background: linear-gradient(to bottom, transparent , #325980 50% ,transparent);
    }
  }
}
</style>
